.tab-box-normalize {
    position: relative;
    display: inline-block;
    .tab-contrl {
        height: 48px; // background-color: rgba(241, 241, 241, 1);
        &>label {
            display: inline-block;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 1;
        }
    }
    .tab-container {
        display: inline-block;
        &>.tab-toggle {
            width: 100%; // z-index: -1;
            &>.tab-decoration {
                position: relative;
                padding-left: 16px;
                padding-right: 32px;
                height: 48px;
                line-height: 48px;
                border-radius: 3px 3px 0 0; // border: 1px solid transparent;
            }
            &>.tab-content {
                @include box_sizing();
                padding: 16px;
                display: none;
                position: absolute;
                left: 0; // top: 0 !important;
                top: 48px; // padding-top: 48px;
                // height: 100%;
                background-color: #fff;
                border-radius: 3px;
                z-index: 1;
            }
        }
        &>input[type="radio"] {
            display: none;
        }
        &>input[type="radio"]:checked+.tab-toggle>.tab-decoration {
            background-color: #fff;
            color: $theme_color; // border: 1px #cdcdcd solid;
            border-bottom: 1px $theme_color solid;
            animation: tabFadeIn .4s;
        }
        &>input[type="radio"]:checked+.tab-toggle>.tab-content {
            display: block; // border: 1px #cdcdcd solid;
            animation: tabFadeIn .4s;
        }
    }
}

@keyframes tabFadeIn {
    0% {
        // display: block !important;
        transform: translateY(-12px);
        opacity: 0.6;
    }
    50% {
        transform: translateY(-2px);
    }
    100% {
        // background-color: blue;
        transform: translateY(0px);
        opacity: 1;
    }
}

.tab-box-smooth {
    position: relative;
    display: inline-block;
    .tab-contrl {
        height: 48px; // background-color: rgba(241, 241, 241, 1);
        &>label {
            display: inline-block;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 1;
        }
        &>input[type="radio"] {
            display: none;
        }
        &>input[type="radio"]:checked+label .tab-toggle>.tab-decoration {
            background-color: #fff;
            color: $theme_color; // border: 1px #cdcdcd solid;
            border-bottom: 1px $theme_color solid; // animation: tabFadeIn .4s;
        }
        &>input[type="radio"]:checked+label .tab-toggle>.tab-content {
            // display: block; // border: 1px #cdcdcd solid;
            // animation: tabFadeIn .4s;
            left: 0;
        }
        &>input[type="radio"]:checked+label~label .tab-toggle>.tab-content {
            // display: block; // border: 1px #cdcdcd solid;
            // animation: tabFadeIn .4s;
            left: 100%;
        }
    }
    .tab-container {
        display: inline-block;
        &>.tab-toggle {
            width: 100%; // z-index: -1;
            &>.tab-decoration {
                position: relative;
                padding-left: 16px;
                padding-right: 32px;
                height: 48px;
                line-height: 48px;
                border-radius: 3px 3px 0 0; // border: 1px solid transparent;
            }
            &>.tab-content {
                @include box_sizing();
                padding: 16px; // display: none;
                position: absolute;
                left: -100%; // top: 0 !important;
                top: 48px; // padding-top: 48px;
                // height: 100%;
                background-color: #fff;
                border-radius: 3px;
                z-index: 1;
                transition: all .3s;
            }
        }
    }
}

.tab-overflow-fix {
    overflow-y: -webkit-paged-x;
}

.tab-box-tb {
    position: relative;
    display: inline-block;
    .tab-contrl {
        height: 100%;
        z-index: 1;
        &>label {
            position: relative;
            // display: block;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 2;
            // background-color: #fff;
        }
        &>input[type="radio"] {
            display: none;
        }
        &>input[type="radio"]:checked+label >.tab-decoration {
            background-color: #fff;
            color: $theme_color;
            border-bottom: 1px $theme_color solid;
        }
        &>input[type="radio"]:checked+label>.radio-out {
            border-color: $text_b;
        }
        &>input[type='radio']:checked+label>.radio-out>.radio-in {
            border-color: $text_b;
            opacity: 1;
        }
        &>input[type="radio"]:checked+label+.tab-content {
            top: 100%; // left: 0;
            // display: block;
            visibility: visible;
            opacity: 1;
            z-index: 1;
        }
        &>input[type="radio"]:checked+label~label+.tab-content {
            top: 200%; // left: 100%;
            // display: none;
            visibility: hidden;
            opacity: 0;
            z-index: -1;
        }
        &>.tab-content {
            @include box_sizing();
            position: absolute; // left: -100%;
            top: -100%; // top: 48px;
            background-color: #fff;
            border-radius: 3px; // z-index: 1;
            transition: top .2s ease-out, opacity .2s ease-out, visibility .2s ease-out; // display: none;
            visibility: hidden;
            opacity: 0;
            z-index: -1; // overflow: hidden;
        }
    }
    .tab-decoration {
        display: inline-block;
        // width: 100%;
        position: relative;
        padding-left: 16px;
        padding-right: 32px;
        height: 48px;
        line-height: 48px;
        border-radius: 3px 3px 0 0;
        &>.tab-toggle {
            
            &>.tab-decoration {
                
            }
        }
    }
}

.tab-box-lr {
    position: relative;
    display: inline-block;
    .tab-contrl {
        height: 48px;
        &>label {
            display: inline-block;
            box-sizing: border-box;
            cursor: pointer;
            z-index: 1;
        }
        &>input[type="radio"] {
            display: none;
        }
        &>input[type="radio"]:checked+label .tab-toggle>.tab-decoration {
            background-color: #fff;
            color: $theme_color;
            border-bottom: 1px $theme_color solid;
        }
        &>input[type="radio"]:checked+label+.tab-content {
            // top: 48px; 
            left: 0; // display: block;
            visibility: visible;
            opacity: 1;
            z-index: 1;
        }
        &>input[type="radio"]:checked+label~label+.tab-content {
            // top: 100%;  
            left: 100%; // display: none;
            visibility: hidden;
            opacity: 0;
            z-index: -1;
        }
        &>.tab-content {
            @include box_sizing();
            position: absolute;
            left: -100%; // top: -100%;
            top: 48px;
            background-color: #fff;
            border-radius: 3px; // z-index: 1;
            transition: top .2s ease-out, opacity .2s ease-out, visibility .2s ease-out; // display: none;
            visibility: hidden;
            opacity: 0;
            z-index: -1; // overflow: hidden;
        }
    }
    .tab-container {
        display: inline-block;
        &>.tab-toggle {
            width: 100%;
            &>.tab-decoration {
                position: relative;
                padding-left: 16px;
                padding-right: 32px;
                height: 48px;
                line-height: 48px;
                border-radius: 3px 3px 0 0;
            }
        }
    }
}